<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
	<meta charset="utf-8">

	<title>Opia. Full service landing &amp; coming soon page.</title>

	<!-- Behavioral Meta Data -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<!-- Core Meta Data -->
	<meta name="author" content="Aether-Themes">
	<meta name="description" content="Full service landing &amp; coming soon page.">
	<meta name="keywords" content="template,coming soon,landing page,html5,css3,jquery">

	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon.png" type="image/png">

	<!-- Apple Touch Icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57-precomposed.png">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Fonts -->
	<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>

	<!-- Styles -->
	<link rel="stylesheet" type="text/css" href="css/loader.css"/>
	<link rel="stylesheet" type="text/css" href="css/framework.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>

	<!-- Colors -->
	<link rel="stylesheet" type="text/css" href="css/colors/cyan.css" title="cyan" media="screen">
	<!-- <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="red" media="screen"> -->
	<!-- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green" media="screen"> -->
	<!-- <link rel="stylesheet" type="text/css" href="css/colors/pink.css" title="pink" media="screen"> -->
	<!-- <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow" media="screen"> -->

	<!--[if lt IE 9]>
		<link rel="stylesheet" type="text/css" href="css/ie.css" />
	<![endif]-->

	<!-- Javascript -->
	<script src="js/modernizr.js"></script>
	<script src="js/jquery.js"></script>
</head>
<body>
	<section id="hero" class="dark">
		<ul id="scene" class="scene"
			data-friction-x="0.1"
			data-friction-y="0.1"
			data-scalar-x="25"
			data-scalar-y="15"
			>
			<li class="layer" data-depth="0.00"></li>

			<!-- BG -->
			<li class="layer" data-depth="0.10" ><div class="background" data-0="transform: translate3d(0px, 0px, 0px);" data-top-bottom="transform: translate3d(0px, 300%, 0px);"></div></li>
			<li class="layer" data-depth="0.15"><div class="triangles"></div></li>
			
			<!-- Hero -->
			<li class="layer" data-depth="0.20"><div class="title" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img class="has-retina" src="images/logo-dark.png" alt="Opia"><span class="line"></span></div></li>
			<li class="layer" data-depth="0.30">
				<div class="hero-content" data-0="opacity: 1;" data-top-bottom="opacity: 0;">
					<h1>Bonjour</h1>
					<p class="sub-title">We're currently working on our full site.</p>
				</div>
			</li>

			<!-- Flakes -->
			<li class="layer" data-depth="0.40">
				<div class="depth-1 flake1" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth1/flakes1.png" alt="flake"></div>
				<div class="depth-1 flake2" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth1/flakes2.png" alt="flake"></div>
				<div class="depth-1 flake3" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth1/flakes3.png" alt="flake"></div>
				<div class="depth-1 flake4" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth1/flakes4.png" alt="flake"></div>
			</li>
			<li class="layer" data-depth="0.50">
				<div class="depth-2 flake1" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth2/flakes1.png" alt="flake"></div>
			</li>
			<li class="layer" data-depth="0.60">
				<div class="depth-3 flake1" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth3/flakes1.png" alt="flake"></div>
				<div class="depth-3 flake2" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth3/flakes2.png" alt="flake"></div>
				<div class="depth-3 flake3" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth3/flakes3.png" alt="flake"></div>
				<div class="depth-3 flake4" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth3/flakes4.png" alt="flake"></div>
			</li>
			<li class="layer" data-depth="0.80"><div class="depth-4" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth4/flakes.png" alt="flake"></div></li>
			<li class="layer" data-depth="1.00"><div class="depth-5" data-0="opacity: 1;" data-top-bottom="opacity: 0;"><img src="images/flakes-dark/depth5/flakes.png" alt="flake"></div></li>
		</ul>
		<a id="action" href="#intro"></a>
	</section>

	<section id="intro" class="container center padded">

		<!-- Intro -->
		<div class="row">
			<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
				<h3>About Us</h3>
				<span class="line"></span>
				<h2>Ten years of experience building the web.</h2>
				<p>We believe in the power of simple, effective design, and believe that power should be wielded by all. We aim to discover and deconstruct — to break things down and build them better.</p>
			</div>
		</div>

	</section>

	<section class="container padded-bottom center-mobile relative list">

		<!-- Blocks -->
		<div class="row">
			<div class="block col-xs-12 col-sm-5">
				<i class="icon icon-basic-eye"></i>
				<h3>Branding &amp; positioning</h3>
				<p>Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board.</p>
			</div>
			<div class="block col-xs-12 col-sm-5 col-sm-offset-2">
				<i class="icon icon-basic-webpage-img-txt"></i>
				<h3>Web design &amp; development</h3>
				<p>We've got your front end and back end needs covered. We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
			</div>
		</div>

		<span class="separator"></span>

		<!-- Blocks -->
		<div class="row">
			<div class="block col-xs-12 col-sm-5">
				<i class="icon icon-basic-photo"></i>
				<h3>Photogprahy</h3>
				<p>Yep, say cheese. Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out from the rest.</p>
			</div>
			<div class="col-xs-12 col-sm-5 col-sm-offset-2">	
				<i class="icon icon-basic-share"></i>
				<h3>Social Strategy</h3>
				<p>This a powerful outlet that constantly gets overlooked. We strive to figure out ways to help your audience grow through all social platforms.</p>
			</div>
		</div>
	</section>

	<section class="full padded-top center dark" style="background-image: url(images/dark-image.jpg);">
		<div class="container">

			<!-- Intro -->
			<div class="row">
				<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
					<h3>Work</h3>
					<span class="line"></span>
					<h2>It’s not a job, It’s a life.</h2>
					<p>We create experiences that transform brands &amp; grow businesses.</p>
				</div>
			</div>

			<!-- Folio pt.1 -->
			<div class="row">
				<div class="col-xs-12 padded-top">
					<ul class="folio-list">
						<li><a class ="lightbox" href="images/portfolio/project1.jpg" title="Caption goes here."><img src="images/portfolio/project1.jpg" alt="thumbnail"></a></li>
						<li><a class ="lightbox" href="images/portfolio/project2.jpg" title="Caption goes here."><img src="images/portfolio/project2.jpg" alt="thumbnail"></a></li>
						<li><a class ="lightbox" href="images/portfolio/project3.jpg" title="Caption goes here."><img src="images/portfolio/project3.jpg" alt="thumbnail"></a></li>
					</ul>
				</div>
			</div>
		</div>
	</section>

	<section class="full padded-bottom center" style="background-image: url(images/light-image.jpg);">
		<div class="container">

			<!-- Folio pt.2 -->
			<div class="row">
				<div class="col-xs-12 padded-bottom">
					<ul class="folio-list dropshadow">
						<li><a class ="lightbox" href="images/portfolio/project4.jpg" title="Caption goes here."><img src="images/portfolio/project4.jpg" alt="thumbnail"></a></li>
						<li><a class ="lightbox" href="images/portfolio/project5.jpg" title="Caption goes here."><img src="images/portfolio/project5.jpg" alt="thumbnail"></a></li>
						<li><a class ="lightbox" href="images/portfolio/project6.jpg" title="Caption goes here."><img src="images/portfolio/project6.jpg" alt="thumbnail"></a></li>
					</ul>
				</div>
			</div>

			<!-- Quote -->
			<div class="row">
				<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
					<span class="large-accent">“</span>
					<h2>They take time to deeply understand what the product is trying to communicate.</h2>
					<span class="line no-accent"></span>
					<h3>Johnny Doeson</h3>
					<h4>Raspberry</h4>
				</div>
			</div>
		</div>
	</section>

	<section class="container padded center">

		<!-- Subscribe -->
		<div class="row">
			<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
				<h3>contact</h3>
				<span class="line"></span>
				<p>Be the first to know when we launch our site.</p>

				<form id="contact" name="contact" method="post" novalidate="novalidate">
				<fieldset>
					<label for="name">Name</label>
					<input type="text" name="name" id="name" />
					<label for="email">Email</label>
			        <input type="email" name="email" id="email" />
			        <label for="message">Message</label>
			        <textarea name="message" id="message"></textarea>
			        <input id="submit" type="submit" name="submit" value="Send Email">
				</fieldset>
			</form>

			<div id="success">
				<p>Your message was sent successfully! I will be in touch as soon as I can.</p>
			</div>

			<div id="error">
				<p>Something went wrong, try refreshing and submitting the form again.</p>
			</div>
			</div>
		</div>

		<!-- Footer -->
		<div class="row padded">
			<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
				<span class="line no-accent"></span>
				<form
					id="subscribe-form"
					action="http://aetherthemes.us7.list-manage.com/subscribe/post-json?u=3b994f728c0aecbabc6fa83cf&amp;id=f01ff8561c" 
					method="get">
					<input type="email" name="EMAIL" onfocus="if(this.value == 'Enter E-mail Address') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter E-mail Address'; }" value="Enter E-mail Address" class="text">
					<input type="submit" value="Subscribe" name="subscribe" class="submit" id="subscribe">

					<div id="subscribe-result"></div>
				</form>
				<ul class="social-list padded">
					<li><a href="#">Twitter</a></li>
					<li><a href="#">Facebook</a></li>
					<li><a href="#">Behance</a></li>
					<li><a href="#">Dribbble</a></li>
				</ul>
				<p class="copyright">© 2016 Opia. All rights reserved.<br>Make something you love.</p>
			</div>
		</div>
	</section>

	<!-- Begin Pageloader -->
	<div id="pageloader">
		<!-- Content -->
		<div class="pageloader-content">
			<h4>Loading...</h4>
			<span class="progress"></span>
		</div><!-- END Content -->
	</div><!-- END Pageloader -->

	<!-- Javascript -->
	<script src="js/loader.js"></script>
	<script src="js/parallax.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>
</body>
</html>